<template>
  <div class="layout">
    <Layout>
      <Header >
        <div class="filter_left">
          <div class="left"><Icon type="md-book" size="25" />首页</div>
          <div class="right">
            <Icon type="md-walk" size="25" />{{this.name}}
          </div>
        </div>
      </Header>
      <Layout :style="{ padding: '0 10px' }">
        <Content
          :style="{ padding: '24px 0', minHeight: '280px', background: '#fff' }"
          class="content"
        >
          <Layout>
            <Sider hide-trigger :style="{ background: '#fff' }" class="sider">
              <router-view name="menu" />
              <Menu
                active-name="1-2"
                theme="light"
                width="auto"
                :open-names="['1']"
                @on-select="menuClick"
              >
                <Submenu name="1">
                  <template slot="title">
                    <Icon type="ios-navigate"></Icon>
                    人事管理
                  </template>
                  <MenuItem name="EmployeeManagement">人员管理</MenuItem>
                </Submenu>
                <Submenu name="2">
                  <template slot="title">
                    <Icon type="ios-analytics"></Icon>
                    客房管理
                  </template>
                  <MenuItem name="Room">房间信息</MenuItem>
                  <MenuItem name="RoomHistory">历史订单</MenuItem>
                  <MenuItem name="GuestManage">住客信息</MenuItem>
                </Submenu>
                <Submenu name="3">
                  <template slot="title">
                    <Icon type="ios-keypad"></Icon>
                    报备管理
                  </template>
                  <MenuItem name="Good">库存管理</MenuItem>
                </Submenu>
                <Submenu name="4">
                  <template slot="title">
                    <Icon type="ios-analytics"></Icon>
                    财务管理
                  </template>
                  <MenuItem name="ExpensesDayily">日常开支</MenuItem>
                </Submenu>
              </Menu>
            </Sider>
            <Content
              :style="{
                padding: '24px',
                minHeight: '280px',
                width: '100%',
                background: '#fff',
              }"
            >
              <router-view></router-view>
            </Content>
          </Layout>
        </Content>
      </Layout>
      <Footer class="layout-footer-center"></Footer>
    </Layout>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      name:this.$store.getters.UserName,
    };
  },
  methods: {
    menuClick(name) {
      this.$router.push(name);
    },
  },
};
</script>

<style>
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  height: auto;
  width: 100%;
  overflow: hidden;
}
.layout-logo {
  width: 100px;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
}
.layout-nav {
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
}
.content {
  height: 955px;
}
.sider {
  height: 900px;
}
.left {
  float: left;
  width: 70px;
  height: 70px;

}
.right{
  float: right;
  width: 90px;
  height: 70px;

}
</style>